<template>
  <div>
    <!-- 搜索部分 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="搜索人群组">
        <el-input
          v-model="formInline.inputValue"
          placeholder="请输入"
          size="mini"
          class="search-input"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" class="search-btn">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
        </template>
      </el-table-column>
      <el-table-column prop="userId" label="用户群(ID)"></el-table-column>
      <el-table-column prop="userName" label="用户人群名称"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.userStatus === 0"
            type="text"
            @click="useBtn(scope.row)"
          >
            使用
          </el-button>
          <el-button v-if="scope.row.userStatus === 1" type="text" disabled>
            已使用
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 标题部分 -->
    <div class="title">
      <div class="title-left"></div>
      <div class="title-right">
        已选择人群
      </div>
    </div>
    <!-- tag标签部分 -->
    <div class="tags-group">
      <el-tag
        v-for="(item, index) of tagsData"
        :key="index"
        type="warning"
        effect="dark"
        closable
        size="small"
        @close="closeTag(item)"
      >
        {{ item.userName }}
      </el-tag>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 搜索表单
      formInline: {
        inputValue: ''
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: [
        {
          userId: 'HD001', // 用户ID
          userName: 'E人群', // 用户名称
          userStatus: 0 // 用户状态 0未使用 1已使用
        },
        {
          userId: 'HD002', // 用户ID
          userName: 'F人群', // 用户名称
          userStatus: 1 // 用户状态 0未使用 1已使用
        },
        {
          userId: 'HD003', // 用户ID
          userName: 'G人群', // 用户名称
          userStatus: 0 // 用户状态 0未使用 1已使用
        }
      ],
      // tag标签数据
      tagsData: []
    }
  },
  methods: {
    // 使用人群按钮
    useBtn(row) {
      const { userId, userName, userStatus } = row
      let tag = { userId, userName, userStatus }
      this.tagsData.push(tag)
      row.userStatus = 1
      console.log(this.tagsData)
    },
    // 标签关闭按钮
    closeTag(tag) {
      let userId = tag.userId
      // 根据id 从表格数据中查找元素 改变状态
      let p = this.tableData.find((item) => item.userId === userId)
      p.userStatus = 0
      // 根据id删除数组中数据
      let index = this.tagsData.findIndex((item) => item.userId === userId)
      this.tagsData.splice(index, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.el-form {
  margin-left: 30px;
}
.search-input {
  width: 300px;
}
.search-btn {
  width: 80px;
  margin-left: 20px;
  background: #1dc8a4;
  color: #fff;
}
.title {
  display: flex;
  margin-left: 30px;
  .title-left {
    width: 3px;
    height: 20px;
    margin-top: 4px;
    margin-right: 4px;
    background: #1dc8a4;
  }
  .title-right {
    font-size: 20px;
  }
}
.tags-group {
  margin: 30px 0 0 0;
  .el-tag {
    margin-left: 30px;
    background: #ff8c00;
  }
}
</style>
